<template>
  <!-- 详情 -->
  <el-dialog
    title="运管备案查询详情"
    :visible.sync="dialogVisible"
    width="1200px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="closedialog"
    class="self-dialog"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-descriptions :column="3" border>
          <el-descriptions-item>
            <template slot="label"> 主管海关代码 </template>
            <dict-value
              :list="customsList"
              :dictCode="form.mainPort"
            ></dict-value>
          </el-descriptions-item>
           <el-descriptions-item>
            <template slot="label"> 国内车牌 </template>
            {{ form.domesticLisenceNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 国内车牌颜色 </template>
            {{ form.domesticLicenseColor }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 外籍车牌 </template>
            {{ form.foreignLicense }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车架号（车辆识别代号） </template>
            {{ form.veFrameNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 企业代码 </template>
            {{ form.coCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆指标编号 </template>
            {{ form.veTargetNo }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 车辆注册地 </template>
            <dict-tag
              :options="dict.type.sw_vehicle_reg_place"
              :value="form.veRegPlace"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 使用性质 </template>
            <dict-tag
              :options="dict.type.sw_vehicle_property"
              :value="form.veProperty"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆运输资格 </template>
            <dict-tag
              :options="dict.type.sw_vehicle_convey_qua"
              :value="form.veConveyQua"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆行驶证编号 </template>
            {{ form.veCardNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆登记车主名称 </template>
            {{ form.veOwnerName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆登记车主证件号码 </template>
            {{ form.veOwnerNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车主境内联系地址 </template>
            {{ form.ownerInsideAddr }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车主境内联系电话 </template>
            {{ form.ownerInsideTel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆类型(型样) </template>
            <dict-tag
              :options="dict.type.sw_vehicle_type"
              :value="form.veType"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆分类 </template>
            <dict-tag
              :options="dict.type.sw_vehicle_class_flag"
              :value="form.veClassFlag"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 厂牌 </template>
            {{ form.brand }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 国籍 </template>
            <dict-tag
              :options="dict.type.mft_route_countrys"
              :value="form.nationality"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 型号 </template>
            {{ form.model }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 排气量 </template>
            {{ form.exhaustCapacity }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车辆出厂日期 </template>
            {{ form.veFactoryDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 发动机号 </template>
            {{ form.veMotorNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 核定载客(人)/核定载质量(千克) </template>
            {{ form.veTon }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 自重(整备质量) </template>
            {{ form.selfWt }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 准牵引总质量 </template>
            {{ form.allowTowTotalWt }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 货箱内部长度(M) </template>
            {{ form.containerInnerLength }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 货箱内部宽度(M) </template>
            {{ form.containerInnerWidth }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 货箱内部尺寸(M) </template>
            {{ form.containerInnerHeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 外廓长度(M) </template>
            {{ form.outerLength }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 外廓宽度(M) </template>
            {{ form.outerWidth }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 外廓高度(M) </template>
            {{ form.outerHeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车身颜色 </template>
            {{ form.veBodyColor }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 油箱容量 </template>
            {{ form.oilBoxCapcity }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 批文/许可证编号 </template>
            {{ form.apprNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 批文/许可证有效期 </template>
            {{ form.apprPeriod }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 最新更新申请业务类型 </template>
            {{ form.currApplyBussiness }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车前45度照片 </template>
            <div v-if="form.front45cPic">
              <a :href="baseUrl+form.front45cPic" style="text-decoration: underline;" target="_blank">
                <el-button icon="el-icon-view" size="mini" type="primary">查看照片</el-button>
              </a>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 车后45度照片 </template>
            <div v-if="form.back45cPic">
              <a :href="baseUrl+form.back45cPic" style="text-decoration: underline;" target="_blank">
                <el-button icon="el-icon-view" size="mini" type="primary">查看照片</el-button>
              </a>
            </div>
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label"> 数据操作类型 </template>
            {{ form.operationType }}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label"> 挂车牌号 </template>
            {{ form.trailerLicenseNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 挂车车架号 </template>
            {{ form.trailerFrameNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 批文扫描图 </template>
            <div v-if="form.approNoPic">
              <a :href="baseUrl+form.approNoPic" style="text-decoration: underline;" target="_blank">
                <el-button icon="el-icon-view" size="mini" type="primary">查看照片</el-button>
              </a>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 是否限制往返次数 </template>
            <dict-tag
              :options="dict.type.sw_vehicle_limit_num"
              :value="form.isLimitNum"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item v-if="form.isLimitNum === 'T'">
            <template slot="label"> 往返次数 </template>
            {{ form.limitNum }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 是否有转关运输资格 </template>
            {{ form.isTrnRecord }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 报关企业代码 </template>
            {{ form.entCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 备注 </template>
            {{ form.memo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申请人 </template>
            {{ form.proposer }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申请时间 </template>
            {{ form.proposeTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 创建时间 </template>
            {{ form.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 创建者 </template>
            {{ form.createBy }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 更新时间 </template>
            {{ form.updateTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 更新者 </template>
            {{ form.updateBy }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申报状态 </template>
            <dict-tag
              :options="dict.type.sw_vehicle_decl_status"
              :value="form.declStatus"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 回执状态 </template>
            <dict-tag
            :options="dict.type.sw_vehicle_rcpt_status"
            :value="form.rcptStatus"
          ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 回执说明 </template>
            {{ form.rcptRemark }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="批准行驶口岸列表" name="second">
        <allow-ie-port-list
          ref="allowPortList"
          dialogType="detail"
          :allowPortListData="form.allowPortsList"
          :customsList="customsList"
        ></allow-ie-port-list>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="closedialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSwRoadVeRecord } from "@/api/swdecl/swRoadVeRecord";
import AllowIePortList from "../../components/allowIePortList.vue";
export default {
  components: {
    AllowIePortList,
  },
  props: {
    detailId: {},
    dict: {},
    customsList: {}
  },
  data() {
    return {
      //显示详情
      dialogVisible: false,
      activeName: "first",
      baseUrl: process.env.VUE_APP_BASE_FILE_URL,
      form: {
        id: null,
        mainPort: null,
        veCustomsNo: null,
        coCode: null,
        veTargetNo: null,
        domesticLisenceNo: null,
        domesticLicenseColor: null,
        foreignLicense: null,
        veRegPlace: null,
        veProperty: null,
        veConveyQua: null,
        veCardNo: null,
        veOwnerName: null,
        veOwnerNo: null,
        ownerInsideAddr: null,
        ownerInsideTel: null,
        veType: null,
        brand: null,
        model: null,
        exhaustCapacity: null,
        veFactoryDate: null,
        veMotorNo: null,
        veFrameNo: null,
        veTon: null,
        selfWt: null,
        allowTowTotalWt: null,
        containerInnerLength: null,
        containerInnerWidth: null,
        containerInnerHeight: null,
        outerLength: null,
        outerWidth: null,
        outerHeight: null,
        veBodyColor: null,
        oilBoxCapcity: null,
        apprNo: null,
        apprPeriod: null,
        currApplyBussiness: null,
        front45cPic: null,
        back45cPic: null,
        memo: null,
        proposer: null,
        proposeTime: null,
        veClassFlag: null,
        operationType: null,
        trailerLicenseNo: null,
        trailerFrameNo: null,
        approNoPic: null,
        nationality: null,
        isLimitNum: null,
        limitNum: null,
        isTrnRecord: null,
        entCode: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        declStatus: null,
        rcptStatus: "0",
        rcptRemark: null,
      },
    };
  },
  watch: {
    detailId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.loadDetail();
        }
      },
    },
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.activeName = "first";
    },
    closedialog() {
      this.dialogVisible = false;
    },
    // 获取详情
    loadDetail() {
      getSwRoadVeRecord(this.detailId).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
  },
};
</script>

<style>
</style>
